const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    devtool:'eval-source-map',//生成sourceMap共有四种source-map、cheap-module-map、eval-source-map、cheap-module-eval-source-map,后两个适合开发时使用，因为打包后输出的JS文件的执行具有性能和安全的隐患，一定不要在生产中使用
    entry:  __dirname + "/app/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer:{
      host:'localhost',
      port:8080,//端口
      contentBase:'./',//本地服务器所加载的页面所在的目录
      inline: true,//inline选项会为入口页面添加“热加载”功能，即代码改变后重新加载页面。
      hot:true//在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。
    },
    module:{//loader所有需要解析的文件  test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须） loader：loader的名称（必须） include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
      rules:[
        {
          test:/(\.jsx|\.js)$/,
          use:{
            loader:'babel-loader',
            options:{
              presets:[
                "env","react"
              ]
            }
          },
          exclude: /node_modules/
        },{
          test:/\.css$/,
          use:[
            {
              loader: "style-loader"
            }, {
                loader: "css-loader",
                options: {//例：import styles from './style.css';
                    modules: true, // 指定启用css modules 
                    localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                }
            }, {
                loader: "postcss-loader"
            }
          ]
        }
      ]
    },
    optimization: {
      minimizer: [//压缩JS  有问题待解决
        new UglifyJsPlugin()
      ]
    },
    plugins: [
      new webpack.BannerPlugin('版权所有，翻版必究'),
      new webpack.HotModuleReplacementPlugin(),//hot热加载插件
      new HtmlWebpackPlugin({//复制html
          template: __dirname + "/index.html",//new 一个这个插件的实例，并传入相关的参数
          filename:'index.html'
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new CleanWebpackPlugin('build/*.*', {
          root: __dirname,
          verbose: true,
          dry: false
      })
    ]
}